import { defineConfig, presetUno, presetAttributify, presetIcons } from 'unocss'
import { presetTypography } from '@unocss/preset-typography'
import { designSystem } from './src/styles/design-system'

export default defineConfig({
  presets: [
    presetUno(),
    presetAttributify(),
    presetIcons({
      scale: 1.2,
      warn: true,
    }),
    presetTypography(),
  ],
  theme: {
    breakpoints: designSystem.breakpoints,
    colors: designSystem.colors,
    spacing: designSystem.spacing,
    borderRadius: designSystem.borderRadius,
    boxShadow: designSystem.boxShadow,
    animation: designSystem.animation,
    fontFamily: designSystem.typography.fontFamily,
    fontSize: designSystem.typography.fontSize,
    fontWeight: designSystem.typography.fontWeight,
    lineHeight: designSystem.typography.lineHeight,
    letterSpacing: designSystem.typography.letterSpacing
  },
  keyframes: designSystem.keyframes,
  shortcuts: {
    // 按钮样式
    'btn-primary': designSystem.components.button.primary,
    'btn-secondary': designSystem.components.button.secondary,
    'btn-outline': designSystem.components.button.outline,
    'btn-ghost': designSystem.components.button.ghost,
    'btn-danger': designSystem.components.button.danger,
    
    // 卡片样式
    'card-base': designSystem.components.card.base,
    'card-elevated': designSystem.components.card.elevated,
    'card-outlined': designSystem.components.card.outlined,
    'card-interactive': designSystem.components.card.interactive,
    'card-feature': 'bg-white rounded-3xl p-8 shadow-lg hover:shadow-2xl transition-all duration-500 border border-gray-100 hover:border-primary-200 overflow-hidden hover:-translate-y-2',
    'card-showcase': 'bg-white rounded-3xl shadow-2xl hover:shadow-3xl transition-all duration-500 border border-gray-100 overflow-hidden group',
    'card-business': 'bg-white rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-500 border border-gray-100 hover:border-blue-300 h-full flex flex-col hover:-translate-y-2 relative overflow-hidden p-4 md:p-6',
    
    // 容器样式
    'container': 'max-w-7xl mx-auto px-6',
    'container-wide': 'max-w-8xl mx-auto px-8',
    'container-narrow': 'max-w-4xl mx-auto px-6',
    'container-page': 'container mx-auto px-4 py-8',
    
    // 间距样式
    'section-padding': 'py-20',
    'section-padding-sm': 'py-15',
    'section-padding-lg': 'py-30',
    
    // 文本样式
    'text-gradient': 'bg-gradient-to-r from-primary-500 to-primary-300 bg-clip-text text-transparent',
    'text-gradient-accent': 'bg-gradient-to-r from-accent-500 to-accent-300 bg-clip-text text-transparent',
    'text-gradient-hero': 'text-display-xl md:text-display-2xl font-bold mb-6 animate-fade-in-up leading-tight',
    'text-section-title': 'text-3xl font-bold text-gray-900 mb-8 animate-fade-in-up',
    'text-page-title': 'text-4xl font-bold text-gray-900 mb-4',
    
    // 背景样式
    'bg-gradient-primary': 'bg-gradient-to-r from-primary-600 via-primary-700 to-secondary-800',
    'bg-gradient-hero': 'bg-gradient-to-b from-primary-50 via-white to-secondary-50',
    'bg-gradient-section': 'bg-gradient-to-b from-white via-gray-50 to-gray-100',
    'bg-gradient-feature': 'bg-gradient-to-b from-gray-50 via-white to-gray-100',
    'bg-decorative-circle': 'absolute rounded-full opacity-20 animate-pulse',
    
    // 图标容器样式
    'icon-container': 'w-24 h-24 bg-gradient-to-br from-primary-500 via-primary-600 to-secondary-600 rounded-2xl flex items-center justify-center shadow-xl group-hover:shadow-2xl group-hover:shadow-primary-500/40 transition-all duration-500 group-hover:rotate-3 group-hover:scale-110',
    'icon-container-sm': 'w-12 h-12 md:w-14 md:h-14 mx-auto bg-gradient-to-br from-blue-500 to-indigo-600 rounded-xl flex items-center justify-center mb-3 shadow-lg group-hover:shadow-xl group-hover:scale-110 transition-all duration-300 relative',
    'icon-badge': 'w-20 h-20 bg-white/20 backdrop-blur-sm rounded-2xl flex items-center justify-center transform rotate-12 group-hover:rotate-0 transition-transform duration-500',
    
    // 布局样式
    'grid-responsive': 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 lg:gap-12',
    'grid-business': 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6',
    'grid-products': 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 mb-8',
    'flex-center': 'flex items-center justify-center',
    'flex-between': 'flex justify-between items-center',
    
    // 悬停效果
    'hover-lift': 'hover:-translate-y-1 transition-transform duration-300',
    'hover-lift-lg': 'hover:-translate-y-2 transition-transform duration-300',
    'hover-lift-xl': 'hover:-translate-y-3 transition-transform duration-400',
    'hover-scale': 'hover:scale-105 transition-transform duration-300',
    'hover-scale-sm': 'hover:scale-102 transition-transform duration-300',
    'hover-glow': 'hover:shadow-2xl hover:shadow-primary-500/30 transition-shadow duration-300',
    'hover-glow-blue': 'hover:shadow-glow hover:shadow-blue-500/40 transition-shadow duration-400',
    'hover-glow-accent': 'hover:shadow-glow hover:shadow-accent-500/40 transition-shadow duration-400',
    'hover-float': 'hover:-translate-y-1 hover:shadow-xl transition-all duration-300 ease-out',
    
    // 过渡动画
    'transition-smooth': 'transition-all duration-300 ease-out',
    'transition-bounce': 'transition-all duration-400 cubic-bezier(0.68, -0.55, 0.265, 1.55)',
    'animate-fade-in': 'animate-fade-in-up',
    
    // 装饰元素
    'decoration-dot': 'w-2 h-2 bg-primary-500 rounded-full animate-pulse',
    'decoration-line': 'flex-1 h-0.5 bg-gradient-to-r from-primary-200 to-transparent rounded-full',
    'decoration-border': 'absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-primary-500 via-secondary-500 to-accent-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-500 origin-left',
  },
  rules: [
    ['text-gradient-primary', {
      'background': 'linear-gradient(135deg, #1677FF 0%, #69B1FF 100%)',
      '-webkit-background-clip': 'text',
      'background-clip': 'text',
      '-webkit-text-fill-color': 'transparent',
    }],
  ],
  safelist: [
    'bg-primary-500',
    'text-primary-500',
    'border-primary-500',
    'shadow-md',
    'shadow-lg',
    'rounded-md',
    'rounded-lg',
  ],
})